<style lang="less" scoped>
.list {
    display: flex;
    flex-wrap: wrap;

    >div {
        display: flex;
        width: 250px;
        padding: 10px;
        margin: 0 20px 20px 0;
        justify-content: space-between;
        align-items: center;
        position: relative;

        img {
            width: 40px;
            max-height: 40px;
            height: auto;
        }

        .info {
            width: 180px;
            cursor: pointer;
        }

        .el-icon {
            position: absolute;
            right: -8px;
            top: -8px;
            z-index: 9;
            cursor: pointer;
        }

        .el-icon:hover {
            color: red;
        }

    }
}

.el-form {
    position: relative;

    .el-image {
        position: absolute;
        right: 0;
        bottom: 0;
    }
}
</style>
<template>
    <el-affix :offset="60">
        <el-anchor style="width: 100px">
            <el-anchor-link v-for="item in website" :key="item.id" :href="`#web_${item.id}`">
                {{ item.title }}
            </el-anchor-link>
        </el-anchor>
        <el-button-group v-if="token" style="width: 100px;">
            <el-button type="primary" icon="Edit" @click="deleteBtn = !deleteBtn" />
            <el-button type="primary" icon="Plus" @click="createDialogVisible" />
        </el-button-group>
    </el-affix>
    <div v-for="item in website" :key="item.id" style="margin-left: 100px;">
        <div :id="`web_${item.id}`" style="font-size: 1.5rem;margin-bottom: 10px"> {{ item.title }}</div>
        <div class="list">
            <div v-for="v in item.website" :key="v.id" class="pane">
                <el-icon v-if="token && deleteBtn" size="1.2rem" @click="delWebsite(v.id)">
                    <CircleClose />
                </el-icon>
                <img :src="v.icon_href">
                <div class="info" @click="linkTo(v.url)">
                    <div class="overflow-clip" style="font-size: 1.1rem;">{{ v.title }}</div>
                    <div class="overflow-clip overflow-clip-2" style="font-size: 0.8rem;min-height: 34px;">{{
                        v.description }}</div>
                </div>
            </div>
        </div>
    </div>
    <el-dialog v-model="createDialog" v-if="token" title="添加网站" width="700" label-width="auto">
        <el-form :model="create" ref="createForm">
            <el-form-item label="链接" prop="url">
                <el-input v-model="create.url" autocomplete="off">
                    <template #append>
                        <el-button icon="Search" @click="getWebsite" />
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="分类" prop="website_genre_id">
                <el-select v-model="create.website_genre_id" placeholder="">
                    <el-option v-for="item in createGenreOptions" :label="item.title" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="名称" prop="title">
                <el-input v-model="create.title" autocomplete="off" />
            </el-form-item>
            <el-form-item label="描述" style="width: 80%;" prop="description">
                <el-input v-model="create.description" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
            </el-form-item>
            <el-form-item label="图标" style="width: 80%;" prop="icon_href">
                <el-input v-model="create.icon_href" autocomplete="off" />
            </el-form-item>
            <el-image style="width: 100px; height: 100px" :src="create.icon_href" fit="cover" />
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="createDialog = false">取消</el-button>
                <el-button type="primary" @click="subCreate"> 保存 </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup>
// 引入依赖
import axios from '@/api/index';
import { onMounted, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

// 定义数据
const website = ref([]);

// 获取数据
onMounted(() => {
    getData();
})
const getData = () => {
    axios.get('/website/index').then((res) => {
        website.value = res.data;
    })
}
// 添加网站
const createDialog = ref(false);
const createForm = ref(null);
const create = ref({})
const createGenreOptions = ref([]);
const createDialogVisible = () => {
    if (createGenreOptions.value.length === 0) {
        axios.get('/website/genre').then((res) => {
            createGenreOptions.value = res.data;
        })
    }
    createDialog.value = true;
}
const getWebsite = () => {
    axios.post('/website/getWebInfo', { url: create.value.url }).then((res) => {
        create.value = res.data;
    })
}
const subCreate = () => {
    axios.post('/website/store', create.value).then((res) => {
        if (res.code == 200) {
            getData();
            ElMessage({
                type: 'success',
                message: res.msg,
            })
            createForm.value.resetFields();
            createDialog.value = false;
        }
    })
}
// 判断登录状态
const token = ref(localStorage.getItem('token'));

// 跳转计数
const linkTo = (url) => {
    window.open(url, '_blank');
}

// 删除网站
const deleteBtn = ref(false);
const delWebsite = (id) => {
    ElMessageBox.confirm(
        '确认要删除该网站？',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        axios.get('/website/delete/' + id).then((res) => {
            if (res.code == 200) {
                getData();
                ElMessage({
                    type: 'success',
                    message: res.msg,
                })
            }
        })

    })

}
</script>